<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>edit_address</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: #f8f8f8;
        }

        .nav-bar {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            height: 48px;
            border-bottom: 0.5px solid #e8e8e8;
            background: #fff;
        }

        .nav-bar-back {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: absolute;
            left: 16px;
        }

        .nav-bar-back-icon {
            width: 20px;
            height: 20px;
        }

        .nav-bar-back-text {
            font-size: 17px;
            color: #000;
        }

        .nav-bar-title {
            font-size: 17px;
            font-weight: 500;
            color: #000;
        }

        .edit-address {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #f6f6f6;
        }

        .edit-address-topform {
            padding: 0 15px;
            background-color: white;
        }

        .edit-address-topform-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 51px;
            border-top: 1px solid #f8f8f8;
        }

        .edit-address-topform-text {
            font-size: 16px;
            color: #333333;
        }

        .edit-address-topform-input {
            width: 210px;
            height: 30px;
            text-align: right;
            color: #333333;
            border: none;
        }

        .qu_box {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a_picker {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
        }

        .a_gor {
            width: 10px;
            height: 10px;
            margin-left: 8px;
        }

        /* 备注 */
        .edit-address-back {
            font-size: 14px;
            margin: 15px 15px 4px;
            color: #6c7279;
        }

        .edit-address-back-box {
            height: 122px;
            box-sizing: border-box;
            padding: 15px;
            background-color: white;
        }

        .edit-address-back-textarea {
            width: 100%;
            height: 100%;
            border: none;
        }

        .flex1 {
            flex: 1;
        }

        /* btn */
        .edit-address-footer {
            display: flex;
            flex-direction: row;
            padding: 15px;
        }

        .edit-address-btn {
            flex: 1;
            height: 45px;
            border-radius: 4px;
            font-weight: bold;
            text-align: center;
            line-height: 45px;
            font-size: 16px;
            color: white;
        }

        .edit-address-btn:active {
            opacity: 0.7;
        }

        .btn_orange {
            background-color: #339dff;
            margin-right: 15px;
        }

        .btn_red {
            background-color: #ff6600;
        }

        .avm-switch:checked::before {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .avm-switch:checked::after {
            -webkit-transform: translateX(20px);
            transform: translateX(22px);
        }

        .avm-switch {
            width: 52px;
            height: 32px;
            display: inline-block;
            border: 1px solid #DFDFDF;
            outline: none;
            border-radius: 16px;
            box-sizing: border-box;
            background-color: #DFDFDF;
            transition: background-color 0.1s, border 0.1s;
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            vertical-align: middle;
            background-color: rgb(4, 190, 2);
        }

        .avm-switch::before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 30px;
            border-radius: 15px;
            background-color: #f6f6f6;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }

        .avm-switch::after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: #FFFFFF;
            box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <div onclick="back()" class="nav-bar-back">
                <img src="../images/back/back.png" alt="back"
                    class="nav-bar-back-icon" />
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">新增收货地址</span>
        </div>
        <div class="edit-address">
            <div class="edit-address-topform">
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">收货人</span>
                    <input class="edit-address-topform-input form-name" placeholder="请填写收货人"
                        maxlength="20" />
                </div>
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">联系方式</span>
                    <input class="edit-address-topform-input form-phone" placeholder="请填写联系方式"
                        keyboard-type="number" maxlength="11" />
                </div>
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">收货地址</span>
                    <div class="qu_box">
                        <input class="edit-address-topform-input form-qustr" placeholder="请填写收货地址" />
                    </div>
                </div>
                <div class="edit-address-topform-item">
                    <span class="edit-address-topform-text">设为默认地址</span>
                    <input type="checkbox" color="#7FA000" class="avm-switch" onchange="" />
                </div>
            </div>
            <!-- 备注 -->
            <span class="edit-address-back">详细地址</span>
            <div class="edit-address-back-box">
                <textarea class="edit-address-back-textarea form-address" data-id="address" placeholder="街道、门牌号等"></textarea>
            </div>

            <!-- btn -->
            <div class="flex1"></div>
            <div class="edit-address-footer">
                <span class="edit-address-btn btn_orange display-none" onclick="fnSubmit(this)">保存</span>
                <span class="edit-address-btn btn_red display-none" onclick="fnDelete(this)">删除</span>
                <span class="edit-address-btn btn_red" onclick="fnSubmit(this)">提交</span>
            </div>
        </div>
    </div>
</body>

<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
    }

    function back() {
        api.closeWin();
    }

    function fnSubmit() {
        const name= $api.val($api.dom('.form-name'));
        const phone= $api.val($api.dom('.form-phone'));
        const qustr= $api.val($api.dom('.form-qustr'));
        const address= $api.val($api.dom('.form-address'));
        if (!name) {
            api.toast({msg: '请输入姓名~'});
            return;
        }
        if (name.length > 14) {
            api.toast({msg: '收货人姓名不得超过14个字符~'});
            return;
        }
        if (name.length < 2) {
            api.toast({msg: '收货人姓名不得少于2个字符~'});
            return;
        }
        if (!phone) {
            api.toast({msg: '请输入联系方式~'});
            return;
        }
        if (isMobile(phone)) {
            api.toast({msg: '请输入正确的手机号~'});
            return;
        }
        if (!qustr) {
            api.toast({msg: '请填写收货地址~'});
            return;
        }
        if (!address) {
            api.toast({msg: '请输入详细地址~'});
            return;
        }
        if (address.length > 50) {
            api.toast({msg: '详细地址不得超过50个字符~'});
            return;
        }
        api.toast({
            msg:'新增地址成功',
            location: 'middle'
        })
    }

    function isMobile(str) {
        var mobileReg = /^1(3[0-9]|4[0-9]|5[0-9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{9}$/;
        return mobileReg.test(str);
    }

</script>

</html>